<template>
  <div class="risk-estimate-left">
    <div class="item">
      <p>优秀</p>
      <p>0</p>
    </div>
    <div class="item">
      <p>良好</p>
      <p>2</p>
    </div>
    <div class="item">
      <p>及格</p>
      <p>380</p>
    </div>
    <div class="item">
      <p>危险</p>
      <p>0</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineComponent } from 'vue';

defineComponent({ name: 'RiskEstimateLeft' });
</script>

<style scoped lang="scss">
.risk-estimate-left {
  @apply w-[448px] h-[188px] ml-[22px] grid grid-rows-2 grid-cols-2 gap-[12px];

  .item {
    @apply pl-[22px] flex flex-col justify-center;

    p:first-child {
      @apply text-[16px];
      font-family: Alibaba PuHuiTi;
    }

    p:last-child {
      @apply text-[32px] font-bold leading-[38px];
    }

    &:first-child {
      background: url('./assets/yx.png') no-repeat center;
    }

    &:nth-child(2) {
      background: url('./assets/lh.png') no-repeat center;
    }

    &:nth-child(3) {
      background: url('./assets/jg.png') no-repeat center;
    }

    &:last-child {
      background: url('./assets/wx.png') no-repeat center;
    }
  }
}
</style>
